<template>
  <div>
    <div id="title">
      <div class="left" @click="$router.back()">
        <van-icon id="iconcccon" color="#fff" size="16" name="arrow-left" />
      </div>
      <div class="box1">发布房源</div>
      <div class="box2"></div>
    </div>
    <van-cell-group id="RentOut">
      <van-cell title="房源信息" />
    </van-cell-group>
    <van-cell
      v-model="$route.query.val"
      title="小区名称"
      value="请输入小区的名称"
      @click="$router.push('/tosearch')"
    />
    <van-field v-model="valuePrice" label="租金" placeholder="请输入租金/月">
      <template #button>
        <span>￥/月</span>
      </template>
    </van-field>
    <van-field
      v-model="valueMian"
      label="建筑面积"
      placeholder="请输入建筑面积"
    >
      <template #button>
        <span>㎡</span>
      </template>
    </van-field>
    <van-cell
      ref="hu"
      title="户型"
      :value="value1"
      is-link
      @click="addList"
    ></van-cell>
    <van-cell
      ref="lou"
      title="所在楼层"
      :value="value2"
      is-link
      @click="addList"
    ></van-cell>
    <van-cell
      ref="chao"
      title="朝向"
      :value="value3"
      is-link
      @click="addList"
    ></van-cell>
    <van-popup v-model="Hshow" position="bottom" :style="{ height: '50%' }">
      <van-picker
        :default-index="2"
        :title="namee"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <van-popup v-model="Sshow" position="bottom" :style="{ height: '50%' }">
      <van-picker
        :default-index="2"
        :title="namee"
        show-toolbar
        :columns="Scolumns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
    <van-popup v-model="Cshow" position="bottom" :style="{ height: '50%' }">
      <van-picker
        :default-index="2"
        :title="namee"
        show-toolbar
        :columns="Ccolumns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>

    <van-cell-group>
      <van-cell title="房源标题" />
    </van-cell-group>
    <van-field
      v-model="title"
      rows="1"
      autosize
      type="textarea"
      placeholder="请输入标题（例如：整租 小区名 2室 5000 元）"
    />
    <van-cell-group>
      <van-cell title="房屋图像" />
    </van-cell-group>
    <div class="housePic">
      <van-uploader v-model="fileList" :after-read="afterRead" />
    </div>

    <van-cell-group>
      <van-cell title="房屋配置" />
    </van-cell-group>
    <van-grid @click="fn()" :column-num="5">
      <van-grid-item
        ref="icon"
        @click="click($event)"
        icon="send-gift-o"
        text="洗衣机"
      />
      <van-grid-item
        ref="icon"
        @click="click($event)"
        icon="photo-o"
        text="空调"
      />
      <van-grid-item
        ref="icon"
        @click="click($event)"
        icon="fire-o"
        text="天然气"
      />
      <van-grid-item
        ref="icon"
        @click="click($event)"
        icon="video-o"
        text="电视"
      />
      <van-grid-item
        ref="icon"
        @click="click($event)"
        icon="hot-o"
        text="热水器"
      />
      <van-grid-item
        ref="icon"
        @click="click($event)"
        icon="points"
        text="宽带"
      />
      <van-grid-item
        ref="icon"
        @click="click($event)"
        icon="cluster-o"
        text="暖气"
      />
      <van-grid-item ref="icon" @click="click($event)" icon="qr" text="衣柜" />
      <van-grid-item
        ref="icon"
        @click="click($event)"
        icon="eye-o"
        text="冰箱"
      />
      <van-grid-item
        ref="icon"
        @click="click($event)"
        icon="guide-o"
        text="沙发"
      />
      <!-- :class="{iconColorActive: isActive}" :class="{iconColorActive: isActive}"
      :class="{iconColorActive: isActive}" :class="{iconColorActive: isActive}"
      :class="{iconColorActive: isActive}" :class="{iconColorActive: isActive}"
      :class="{iconColorActive: isActive}" :class="{iconColorActive: isActive}"
      :class="{iconColorActive: isActive}" :class="{iconColorActive: isActive}" -->
    </van-grid>
    <div class="Kong"></div>
    <van-cell-group>
      <van-cell title="房屋描述" />
    </van-cell-group>
    <van-field
      class="House-text"
      v-model="message"
      rows="1"
      autosize
      type="textarea"
      placeholder="请输入房屋描述信息"
    />
    <div class="Kong2"></div>
    <div class="RentOutFooter">
      <div @click="cancelshur" class="left">取消</div>
      <div @click="addHouse" class="right active">确认</div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { showHouseApi } from '@/api/user'
export default {
  name: 'rontout_',

  props: {},
  components: {},
  data () {
    return {
      isActive: false,
      arr: [
        'send-gift-o',
        'photo-o',
        'fire-o',
        'video-o',
        'hot-o',
        'points',
        'cluster-o',
        'qr',
        'eye-o',
        'guide-o'
      ],
      arrtext: [
        '洗衣机',
        '空调',
        '天然气',
        '电视',
        '热水器',
        '宽带',
        '暖气',
        '衣柜',
        '冰箱',
        '沙发'
      ],
      fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      message: '',
      value: '',
      valueMian: '',
      valuePrice: '',
      value1: '',
      value2: '',
      value3: '',
      Hshow: false,
      Sshow: false,
      Cshow: false,
      namee: '',
      columns: ['一室', '二室', '三室', '四室', '四室+'],
      Scolumns: ['高楼层', '中楼层', '低楼层'],
      Ccolumns: [
        '东',
        '西',
        '南',
        '北',
        '东南',
        '西南',
        '东北',
        '西北',
        '东南',
        '西南'
      ],
      title: ''
    }
  },
  methods: {
    addList (e) {
      // console.log(e.srcElement.offsetParent.innerText);
      const nameHtml = e.srcElement.offsetParent.innerText
      if (nameHtml === '户型') {
        this.Hshow = true
      } else if (nameHtml === '所在楼层') {
        this.Sshow = true
      } else {
        this.Cshow = true
      }
    },
    onConfirm (value, index) {
      if (this.columns.includes(value)) {
        this.value1 = value
        this.Hshow = false
      }
      if (this.Scolumns.includes(value)) {
        this.value2 = value
        this.Sshow = false
      }
      if (this.Ccolumns.includes(value)) {
        this.value3 = value
        this.Cshow = false
      }
    },
    onChange (picker, value, index) {
      if (this.columns.includes(value)) {
        this.value1 = value
      }
      if (this.Scolumns.includes(value)) {
        this.value2 = value
      }
      if (this.Ccolumns.includes(value)) {
        this.value3 = value
      }
    },
    onCancel () {
      // Toast('取消');
      this.Sshow = false
      this.Hshow = false
      this.Cshow = false
    },
    async addHouse () {
      console.log(1)
      const params = {
        title: this.title,
        description: this.message,
        price: this.valuePrice,
        size: this.valueMian,
        floor: this.value2
      }
      const res = await showHouseApi(params)
      console.log(res)
    },
    cancelshur () {
      Dialog.confirm({
        title: '提示',
        message: '确认放弃发布房源',
        confirmButtonColor: '#21b97a',
        confirmButtonText: '继续编辑',
        cancelButtonText: '放弃编辑'
      })
        .then(() => {})
        .catch(() => {
          this.$router.push('/article')
        })
    },
    afterRead (file) {
      console.log(file)
    }
  },
  mounted () {},
  watch: {},
  computed: {},
  filters: {}
}
</script>

<style scoped>
.iconColorActive {
  color: #21b97a;
}

#RentOut {
  margin-top: 45px;
}
#title {
  width: 100%;
  height: 45px;
  background-color: #21b97a;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
#title .left {
  flex: 1;
  line-height: 45px;
}
#title #iconcccon {
  margin-left: 16px;
}
#title .box1 {
  text-align: center;
  color: #fff;
  line-height: 45px;
  flex: 1;
}
#title .box2 {
  flex: 1;
}
.housePic {
  width: 100%;
  height: 110px;
  /* line-height: 110px; */
  /* background-color: #21b97a; */
  display: flex;
  align-items: center;
}
.Kong {
  width: 100%;
  height: 20px;
  background-color: #f6f5f6;
}
.House-text {
  height: 150px;
}
.Kong2 {
  width: 100%;
  height: 70px;
  background-color: #f5f5f9;
}
.RentOutFooter {
  z-index: 9;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 45px;
  background-color: #fff;
  display: flex;
}
.RentOutFooter .left {
  color: #21b97a;
  text-align: center;
  line-height: 45px;
  flex: 1;
}
.RentOutFooter .right {
  color: #21b97a;
  text-align: center;
  line-height: 45px;
  flex: 1;
}
.RentOutFooter .active {
  color: #fff;
  background-color: #21b97a;
}
</style>
